<template>
  <div class="workflow-mini-graph" ref="containerRef">
    <svg :width="width" :height="height" viewBox="0 0 300 100">
      <!-- 定义箭头标记 -->
      <defs>
        <marker 
          id="arrowhead"
          markerWidth="10"
          markerHeight="7"
          refX="9"
          refY="3.5"
          orient="auto"
        >
          <polygon points="0 0, 10 3.5, 0 7" fill="#409eff" />
        </marker>
      </defs>

      <!-- 渲染连接线 -->
      <g class="edges">
        <line
          v-for="(edge, index) in computedEdges"
          :key="index"
          :x1="edge.x1"
          :y1="edge.y1"
          :x2="edge.x2"
          :y2="edge.y2"
          stroke="#409eff"
          stroke-width="2"
          marker-end="url(#arrowhead)"
        />
      </g>

      <!-- 渲染节点 -->
      <g class="nodes">
        <g
          v-for="(node, index) in computedNodes"
          :key="node.id"
          class="node"
          :transform="`translate(${node.x}, ${node.y})`"
        >
          <!-- 节点背景 -->
          <rect
            :width="nodeWidth"
            :height="nodeHeight"
            rx="4"
            :fill="getNodeColor(node.type)"
            :stroke="getNodeColor(node.type)"
            stroke-width="2"
            opacity="0.8"
          />
          
          <!-- 节点图标 -->
          <text
            :x="nodeWidth / 2"
            :y="nodeHeight / 2 - 4"
            text-anchor="middle"
            dominant-baseline="middle"
            font-size="12"
            fill="white"
            font-weight="bold"
          >
            {{ getNodeIcon(node.type) }}
          </text>
          
          <!-- 节点标签 -->
          <text
            :x="nodeWidth / 2"
            :y="nodeHeight + 12"
            text-anchor="middle"
            font-size="10"
            fill="#606266"
          >
            {{ node.label }}
          </text>
        </g>
      </g>
    </svg>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const props = defineProps({
  nodes: {
    type: Array,
    default: () => []
  },
  edges: {
    type: Array,
    default: () => []
  }
})

const containerRef = ref(null)
const width = ref(300)
const height = ref(100)
const nodeWidth = 40
const nodeHeight = 24

// 计算节点位置
const computedNodes = computed(() => {
  const nodes = props.nodes || []
  if (nodes.length === 0) return []

  const spacing = Math.min(200 / Math.max(nodes.length - 1, 1), 80)
  const startX = (width.value - (nodes.length - 1) * spacing) / 2

  return nodes.map((node, index) => ({
    ...node,
    x: startX + index * spacing - nodeWidth / 2,
    y: height.value / 2 - nodeHeight / 2
  }))
})

// 计算连接线位置
const computedEdges = computed(() => {
  const edges = props.edges || []
  const nodes = computedNodes.value
  
  return edges.map(edge => {
    const sourceNode = nodes.find(n => n.id === edge.source)
    const targetNode = nodes.find(n => n.id === edge.target)
    
    if (!sourceNode || !targetNode) return null
    
    return {
      x1: sourceNode.x + nodeWidth,
      y1: sourceNode.y + nodeHeight / 2,
      x2: targetNode.x,
      y2: targetNode.y + nodeHeight / 2
    }
  }).filter(Boolean)
})

// 获取节点颜色
const getNodeColor = (type) => {
  const colors = {
    'data-source': '#67c23a',
    'data-transform': '#e6a23c',
    'data-target': '#409eff',
    'data-output': '#f56c6c'
  }
  return colors[type] || '#909399'
}

// 获取节点图标
const getNodeIcon = (type) => {
  const icons = {
    'data-source': 'DB',
    'data-transform': 'ETL',
    'data-target': 'TG',
    'data-output': 'OUT'
  }
  return icons[type] || '?'
}
</script>

<style scoped>
.workflow-mini-graph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px dashed #dcdfe6;
}

.workflow-mini-graph svg {
  max-width: 100%;
  max-height: 100%;
}

.node {
  cursor: pointer;
}

.node rect {
  transition: all 0.3s;
}

.node:hover rect {
  opacity: 1;
  transform: scale(1.05);
}
</style> 